<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap3\js\jquery-1.12.4.min.js">

        </script>
        <script src="bootstrap3\js\bootstrap.min.js">

        </script>
    </head>
    <div class="container-fulid">
        <div class="col-md-3">
            <h2>列表</h2>
            <p><strong>无序列表</strong></p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4
                    <ul>
                        <li>4-1</li>
                        <li>4-2</li>
                        <li>4-3</li>
                        <li>4-4</li>
                    </ul>
                </li>
                <li>5</li>
            </ul>
            <p><strong>有序列表</strong></p>
            <ol>
                <li>a</li>
                <li>b</li>
                <li>c
                    <ul>
                        <li>c-a</li>
                        <li>c-b</li>
                        <li>c-c</li>
                        <li>c-d</li>
                    </ul>
                </li>
                <li>d
                    <ol>
                        <li>d-a</li>
                        <li>d-b</li>
                        <li>d-c</li>
                    </ol>
                </li>
                <li>e</li>
            </ol>
            <p><strong>无样式列表</strong></p>
            <ul class="list-unstyled">
                <li>min</li>
                <li>mid <strong>内联列表</strong>
                    <ul class="list-inline">
                        <li>河南</li>
                        <li>湖北</li>
                        <li>陕西</li>
                    </ul>
                </li>
                <li>max <strong>描述</strong>
                    <dl>
                        <dt>南阳</dt>
                        <dd>四圣故里，有张仲景、张衡、范蠡、诸葛亮。</dd>
                        <dt>襄阳</dt>
                        <dd>本来叫襄樊，为了争诸葛亮躬耕地，改名襄阳</dd>
                    </dl>

                </li>
                <li>地名普及
                    <dl class="dl-horizontal text-overflow">
                        <dt>三省交界</dt>
                        <dd>位于河南、湖北、陕西交界地<kbd>荆紫关</kbd></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="col-md-3">
            <h2>代码</h2>
            <p><strong>代码的处理</strong></p>
            <p>代码使用&lt;code&gt;console.write('')&lt;code&gt;包裹;样式为<code>console.write('')</code> </p>
            <p><strong>用户输入</strong></p>
            <p>用户输入了<kbd>hello</kbd></p>
            <p><strong>代码块</strong></p>
            <p>
                <pre> public void mian .... </pre>
            </p>
            <p><strong>变量</strong></p>
            <p><var>ax</var> + <var>bx</var> = <var>cx</var> </p>
            <p><strong>程序输出</strong></p>
            <p><samp>the result:12.33</samp></p>
            <h2>表格</h2>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-condensed">

                    <head class="active">
                        <td>序号</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>功能描述</td>
                    </head>
                    <tr class="info">
                        <td>1</td>
                        <td>张三</td>
                        <td>12</td>
                        <td>table-striped 表格斑马线</td>
                    </tr>
                    <tr class="success">
                        <td>2</td>
                        <td>李四</td>
                        <td>18</td>
                        <td>table-bordered 表格边框</td>
                    </tr>
                    <tr class="warning">
                        <td>3</td>
                        <td>王二</td>
                        <td>18</td>
                        <td>table-hover 鼠标悬停</td>
                    </tr>
                    <tr class="danger">
                        <td>4</td>
                        <td>麻子</td>
                        <td>18</td>
                        <td>table-condensed <a>表格紧缩</a></td>
                    </tr>

                </table>
            </div>
            <h2>表单</h2>
            <form>
                <div class="form-group">
                    <label for="tb_eamil"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Email</label>
                    <input id="tb_eamil" type="email" class="form-control" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="tb_pwd"><span class="glyphicon glyphicon-oil"></span>&nbsp;Password</label>
                    <input type="password" id="tb_pwd" placeholder="Password" class="form-control">
                </div>
                <div class="form-group">
                    <label for="bt_file"><span class="glyphicon glyphicon-open"></span>&nbsp;Upload File</label>
                    <input type="file" id="bt_file">
                    <span class="help-block">上传文件</span>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 是否超级管理员
                    </label>
                </div>
                <button type="submit" class="btn btn-default">确定</button>
            </form>

        </div>
        <div class="col-md-6">
            <h3>表单横向排列</h3>
            <form class="form-inline">
                <div class="form-group">
                    <label for="tb_user"><span class="glyphicon glyphicon-user"></span>&nbsp; User Name:</label>
                    <input type="text" class="form-control" id="tb_user" placeholder="User Name">
                </div>
                <div class="form-group">
                    <label for="tb_pwd2"><span class="glyphicon glyphicon-oil"></span>&nbsp; Password:</label>
                    <input type="text" class="form-control" id="tb_pwd2" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

            <form class="form-inline">
                <div class="form-group">
                    <label for="tb_user3" class="sr-only"><span class="glyphicon glyphicon-user"></span>&nbsp; User Name:</label>
                    <input type="text" class="form-control" id="tb_user3" placeholder="User Name">
                </div>
                <div class="form-group">
                    <label for="tb_pwd3" class="sr-only"><span class="glyphicon glyphicon-oil"></span>&nbsp; Password:</label>
                    <input type="text" class="form-control" id="tb_pwd3" placeholder="Password">
                </div>
                <div class="checkbox">
                    <label>
                      <input type="checkbox"> 是否超级管理员
                  </label>
                </div>
                <button type="submit" class="btn btn-default">Log in</button>
            </form>

            <form class="form-inline">
                <div class="form-group">
                    <label for="tb_salary" class="sr-only">工资</label>
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="text" class="form-control" id="tb_salary" placeholder="工资">
                        <span class="input-group-addon">.00</span>
                    </div>
                    <span class="form-default"><code>使用</code><kbd>class=inputgroup</kbd>可以让 几个 组件合成一个组件的视觉效果</span>
                </div>
            </form>

            <h3>使用<code>form-horizontal</code>实现form类格栅 系统</h3>
            <span class="help-block">实现水平布局</span>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="tb_signcode" class="col-md-1 control-label">注册码</label>
                    <div class="col-md-7">
                        <input type="text" id="tb_signcode" class="form-control " placeholder="Sign Code">
                    </div>
                </div>
                <div class="form-group">
                    <label for="tb_machine" class="col-md-1 control-label">机器</label>
                    <div class="col-md-7">
                        <div class="input-group">
                            <span class="input-group-addon">code</span>
                            <input type="text" id="tb_machine" class="form-control " placeholder="Machine">
                            <span class="input-group-addon">End</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-1 col-md-offset-3">
                        <button type="submit" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="4" placeholder="文本域"></textarea>
                </div>
                <div class="form-group">
                    <div class=" col-md-2">
                        <span class="help-block">多选框</span>
                        <div class="checkbox">
                            <label>
                            <input type="checkbox" id="cb1" value="v1">1
                        </label>
                        </div>
                        <div class="checkbox">
                            <label>
                            <input type="checkbox" id="cb2" value="v2">2
                        </label>
                        </div>
                        <div class="checkbox disabled">
                            <label>
                            <input type="checkbox" id="cb3" value="v3" disabled>3
                        </label>
                        </div>

                    </div>
                    <div class=" col-md-2">
                        <span class="help-block">单选框</span>
                        <div class="radio">
                            <label>
                                <input type="radio" id="rd1" name="rbgroup" value="r1">a
                        </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" id="rd2" name="rbgroup" value="r2">b
                        </label>
                        </div>
                        <div class="radio disabled">
                            <label>
                                <input type="radio" id="rd3" name="rbgroup" value="r3" disabled>c
                        </label>
                        </div>
                    </div>
                    <div class=" col-md-3">
                        <span class="help-block">水平排列的选择框</span>
                        <div class="checkbox-inline">
                            <label>
                            <input type="checkbox" id="cbi1" value="ci1">i-1
                        </label>
                        </div>

                        <div class="checkbox-inline">
                            <label>
                            <input type="checkbox" id="cbi2" value="ci2">i-2
                        </label>
                        </div>

                        <div class="checkbox-inline">
                            <label>
                            <input type="checkbox" id="cbi3" value="ci3">i-3
                        </label>
                        </div>
                        <br>
                        <div class="radio-inline">
                            <label>
                            <input type="radio" name="rdigroup" id="rdi1" value="rdi1"><abbr title="radiobutton-inline-1">ai-1</abbr>
                        </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                            <input type="radio" name="rdigroup" id="rdi2" value="rdi2"><cite title="radiobutton-inline-2">ai-2</cite>
                        </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                            <input type="radio" name="rdigroup" id="rdi3" value="rdi2">ai-3
                        </label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <span class="help-block">下拉列表</span>
                        <select class="form-control">
                             <option>北京</option>
                              <option>上海</option>
                               <option>广州</option>
                                <option>深州</option>
                                 <option>武汉</option>
                   </select>

                        <span class="help-block">多项下拉列表</span>
                        <select multiple class="form-control">
                             <option>北京</option>
                              <option>上海</option>
                               <option>广州</option>
                                <option>深州</option>
                                 <option>武汉</option>
                   </select>
                    </div>
                    <div class="col-md-3">
                        <img src="1.jpg" class="img-rounded">


                    </div>
                    <div class="col-md-3">
                        <img src="2.png" class="img-circle">
                    </div>
                    <div class="col-md-3">
                        <img src="3.png" class="img-thumbnail">
                    </div>
            </form>
            </div>
        </div>

    </html>